<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transform&Animation</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .transAnima {
      margin: 0 auto;
      margin-top: 50px;
      position: relative;
      width: 400px;
      min-height: 200px;
      border: 1px solid red;
    }

    .transAnima>div {
      width: 100%;
      height: 200px;
      border: 1px solid gray;
      font-size: 12px;
    }

    .transform>p {
      width: 100px;
      height: 100px;
      border: 1px solid gray;
      transform: translateX(-10px) translateY(-20px);
      transform: matrix(1, 2, -1, 1, 80, 80);
      background-color: pink;
    }

    .rotate>p {
      width: 100px;
      height: 100px;
      border: 1px solid gray;
      transform: rotate(-45deg);
      /* Equal to rotateZ(45deg) */
      background-color: pink;
      transform: perspective(3);
    }

    .transform-origin>p {
      width: 200px;
      height: 200px;
      border: 1px solid gray;
      transform: rotate(-45deg);
      transform-origin: right bottom 60px;
      transform-style: preserve-3d;
      perspective: 2px;
    }

    .pers250 {
      perspective: 250px;
    }

    .pers350 {
      perspective: 350px;
    }

    .pers500 {
      perspective: 500px;
    }

    .pers650 {
      perspective: 650px;
    }

    /* Define the container div, the cube div, and a generic face */
    .container {
      width: 200px;
      height: 200px;
      margin: 75px 0 0 75px;
      border: none;
    }

    .cube {
      width: 100%;
      height: 100%;
      backface-visibility: visible;
      perspective-origin: 150% 150%;
      transform-style: preserve-3d;
    }

    .face {
      display: block;
      position: absolute;
      width: 100px;
      height: 100px;
      border: none;
      line-height: 100px;
      font-family: sans-serif;
      font-size: 60px;
      color: white;
      text-align: center;
    }

    /* Define each face based on direction */
    .front {
      background: rgba(0, 0, 0, 0.3);
      transform: translateZ(50px);
    }

    .back {
      background: rgba(0, 255, 0, 1);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
    }

    .right {
      background: rgba(196, 0, 0, 0.7);
      transform: rotateY(90deg) translateZ(50px);
    }

    .left {
      background: rgba(0, 0, 196, 0.7);
      transform: rotateY(-90deg) translateZ(50px);
    }

    .top {
      background: rgba(196, 196, 0, 0.7);
      transform: rotateX(90deg) translateZ(50px);
    }

    .bottom {
      background: rgba(196, 0, 196, 0.7);
      transform: rotateX(-90deg) translateZ(50px);
    }

    /* Make the table a little nicer */
    th,
    p,
    td {
      background-color: #EEEEEE;
      padding: 10px;
      font-family: sans-serif;
      text-align: left;
    }

    .transition>.box {
      border-style: solid;
      border-width: 1px;
      display: block;
      width: 100px;
      height: 100px;
      background-color: #0000FF;
      transition: width 1s, height 1s, background-color 1s, transform 1s;
    }

    .transition>.box:hover {
      background-color: #FFCCCC;
      width: 200px;
      height: 200px;
      transform: rotate(180deg);
    }

    .polling_message {
      color: white;
      float: left;
      margin-right: 2%;
    }

    .transAnima>.view_port {
      background-color: black;
      height: 25px;
      width: 100%;
      height: 30px;
      overflow: hidden;
    }

    .cylon_eye {
      background-color: red;
      background-image: linear-gradient(to right,
        rgba(0, 0, 0, .9) 25%,
        rgba(0, 0, 0, .1) 50%,
        rgba(0, 0, 0, .9) 75%);
      color: white;
      height: 100%;
      width: 20%;
      -webkit-animation: 4s linear 0s infinite alternate move_eye;
      animation: 4s linear 0s infinite alternate move_eye;
    }

    @-webkit-keyframes move_eye {
      from {
        margin-left: -20%;
      }

      to {
        margin-left: 100%;
      }
    }

    @keyframes move_eye {
      from {
        margin-left: -20%;
      }

      to {
        margin-left: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="transAnima">
    <div class="transform">
      transform
      <p>
        i am transfrom
      </p>
    </div>
    <div class="rotate">
      <p>
        rotate
      </p>
    </div>
    <div class="transform-origin">
      <p>
        只是设置旋转点，需要结合rotate使用
        transform-origintransform-origin
        CSS 属性 perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z'<'0 时则比正常小，大小程度由该属性的值决定。 </p>
    </div>
    <table>
      <tbody>
        <tr>
          <th><code>perspective: 250px;</code>
          </th>
          <th><code>perspective: 350px;</code>
          </th>
        </tr>
        <tr>
          <td>
            <div class="container">
              <div class="cube pers250">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
          <td>
            <div class="container">
              <div class="cube pers350">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th><code>perspective: 500px;</code>
          </th>
          <th><code>perspective: 650px;</code>
          </th>
        </tr>
        <tr>
          <td>
            <div class="container">
              <div class="cube pers500">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
          <td>
            <div class="container">
              <div class="cube pers650">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="transition">
      <div class="box">
        Sample
      </div>
    </div>
    <div class="view_port">
      <div class="polling_message">
        animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。
      </div>
      <div class="cylon_eye"></div>
    </div>
  </div>
</body>

</html>